<template>
  <div>
    <div class="flex">
      <el-input
        id="searchInput"
        v-model="input"
        placeholder="可用空格分开多个关键字进行搜索"
        @keyup.enter.native="search"
      />
      <el-button
        class="align-self-end m-l-10"
        type="primary"
        v-text="'搜索'"
        @click="search"
      />
    </div>
    <result-list :list="list" :loading="loading" />
    <el-pagination
      class="flex m-t-10 align-items-center"
      layout="prev, pager, next"
      hide-on-single-page
      :current-page="curPage"
      :page-count="pageCount"
      @current-change="selectedPage"
    />
  </div>
</template>

<script>
import ResultList from '@/components/search/result-list';
import { formatList } from '@/components/search/format';

export default {
  name: 'CommunitiesSearch', // 社区的搜索
  components: { ResultList },
  data() {
    return {
      input: '',
      list: [],
      loading: false,
      curPage: 1,
      pageCount: 1,
    };
  },
  methods: {
    search() {
      this.loading = true;
      this.list = [];
      this.$api.search.community({
        communityId: this.$route.params.communityId,
        title: this.input.trim(),
        page: this.curPage,
      }).then((res) => {
        this.list = formatList(res.data);
        this.curPage = res.kaminari.current_page;
        this.pageCount = res.kaminari.total_pages;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 页面跳转！
    selectedPage(page) { this.curPage = page; },
  },
  watch: {
    curPage() { this.search(); },
  },
};
</script>

<style></style>
